<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>搜索</title>
<link rel="icon" href="http://glorywebsdemo.com/themeforest/html/carveordering/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/bootstrap.min.css" />

<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/menu.css" />
<link href="/css/style2.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="/css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/xcConfirm.css"/>
<style>
li {
	list-style-type: none;
}

.mydiv:hover {
	width: 250px;
	height: auto;
	border: #909090 1px solid;
	background: #fff;
	color: #333;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,
		direction=120, strength=4);
	-moz-box-shadow: 2px 2px 10px #909090;
	-webkit-box-shadow: 2px 2px 10px #909090;
	box-shadow: 2px 2px 10px #909090;
}

a {
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}

a:link, a:visited {
	text-decoration: none; /*超链接无下划线*/
}

.fd_class:hover{
	background-color: #ff18001f;
}

.left_col{
	height:auto;
	min-height:800px;
	background-color: #fff;
	/* border: #909090 1px solid; */
	margin:2px 12px 10px 30px;
}

.right_col{
	height:auto;
	min-height:800px;
	background-color: #fff;
/* 	border: #909090 1px solid; */
	margin:2px 12px 10px 12px;
}

@media (max-width: 767px) {
	.left_col{
		height:auto;
		min-height:auto;
	}
	
	.right_col{
		height:auto;
		min-height:auto;
	}
}

</style>
</head>

<body>

	<div class="container" style="padding: 0; margin-top: 0; background-color: EBEBEB;">
		<div class="container-fluid main-content" style="margin-bottom: 4px; padding: 0;">
			<!--
                	描述：网站头
                -->
			<div class="header">
				<div class="logo">
					<img th:src="${session.user.iconUrl}" style="float: left; padding: 5px; width: 45px; height: 45px; border-radius: 50%;" />
					 <a href="#" style="float: left;">
						<h1>搜索结果</h1>
					</a>
					
				</div>
				<div class="search">
					<form>
						<div class="form-group" style="display: flex;flex-direction: row;">
							<button id="searchBtn" type="submit" class="fa fa-search"  style="margin-left: 10px;"></button>
							<input type="text" style="width: 200px;" id="searchcontent" autocomplete="off" class="form-control" placeholder="Search for a video" />

						</div>
					</form>
				</div>
				<div class="clearfix"></div>
			</div>


			<!--
                	描述：导航
                -->
			<div class="bootstrap_container">
				<nav class="navbar navbar-default w3_megamenu" role="navigation">
					<div class="navbar-header">
						<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle">
							<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
						</button>
						<a href="#" class="navbar-brand"><i class="fa fa-home"></i></a>

					</div>
					<!-- end navbar-header -->

					<div id="defaultmenu" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li data-toggle="tab" class="active"><a id="searchButton" href="#">相关视频</a></li>
<!--							<li data-toggle="tab"><a id="fdVideoButton" href="#">好友</a></li>-->
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown" data-toggle="tab"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span
									title="设置" class="glyphicon glyphicon-cog"></span></a>
								<ul class="dropdown-menu mytab">
									<li data-toggle="tab" class="dropdown-header">设置中心</li>
									<li data-toggle="tab"><a id="reload" href="#">页面刷新</a></li>
									<li data-toggle="tab"><a href="#">安全退出</a></li>
									<li data-toggle="tab"><a href="#">账号注销</a></li>
								</ul></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
					</nav>
			</div>

			<div class="container" style="border: rgba(0, 0, 0, .125) solid 1px;">


				<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示全部
                -->
				<div class="container-fluid row p_card" id="searchAllPage">
					<div th:each="video : ${session.searchlist}" th:id="${video.videoId}" style="margin-bottom:40px;" class="col-lg-3 ">
						<ul style="padding:0;margin:0;"><li style="margin:0;">
							<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;">
							<li style="margin:4px 0;">
							<div style="width:100%;display: flex;flex-direction:row;">
							<img th:onclick="play([[${video.videoId}]]);" style="width:50px; height:50px; border-radius:50%;" th:src="${video.user.iconUrl}">

							<div th:text="${video.user.userName}" style="font-size: 24px;font-family:仿宋;margin: auto 10px;"></div></div></li>
							<div class="C_img" style="width:100%;">
								<img th:onclick="play([[${video.videoId}]]);" style="width:100%;" class="absoImg" th:src="${video.thumbnailUrl}" >
							</div>
							<div class="container-fluid" style="padding:2px 5px;">
								<h4 th:text="'主题：'+${video.videoTitle}" class="title"></h4>
								<p th:text="'描述：'+${video.videoInfo.substring(0, 35)}+'...'" class="desc"></p>
								<div class="containe-fluidr" style="padding:8px 0 ;">
									<div th:text="'日期：'+${video.editDate}" class="" style="float:left;"></div>
									<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">
										<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"></ul>
									</div>
								</div>
							</div></div></li></ul></div>

				</div>


				</div>

				<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示图片
                -->
				<div class="container row p_card" id="searchImgPage"></div>

			</div>

		</div>



		<script src="/js/jquery.min.js"></script>
		<!-- include flowplayer -->
		<script src="/js/flowplayer.min.js"></script>

		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/common.js" type="text/javascript"></script>
		<script src="/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/home.js"></script>
		<script type="text/javascript">
			$('#reload').click(function() {
				window.location.reload();
			});

			$('#searchBtn').click(function(){
				var keyword = $("#searchcontent").val();
				window.open("/VideoController/search?keyword="+keyword);

			});
			function play(videoId) {
				window.open("/VideoController/videoPlay?videoId=" + videoId);
			}

		</script>
	</div>
</body>

</html>